<template>
  <div class="home">
    <bread-crumb title="用户收货地址"></bread-crumb>
  <el-table :data="datas" border stripe>
    <el-table-column align="center" prop="adds_id" label="收货地址编号" width="150px"></el-table-column>
    <el-table-column align="center" prop="user_id" label="用户编号" width="100px"></el-table-column>
    <el-table-column align="center" prop="user_name" label="收件人" width="100px"></el-table-column>
    <el-table-column align="center" prop="user_phone" label="收件人电话" width="150px"></el-table-column>
    <el-table-column align="center" prop="user_add" label="收件人电话" width="500px"></el-table-column>
    <el-table-column align="center" prop="is_default" label="默认地址" width="100px">
      <template slot-scope='scope'>
        <span v-if="scope.row.is_default">是</span>
        <span v-else>否</span>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50, 100]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="totalRows">
   </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      datas: {},
      currentPage: 1,
      pageSize: 10,
      totalRows: 0
    }
  },
  methods: {
    loadData () {
      this.$http.get('/adminapi/useradd/?page=' + this.currentPage + '&page_size=' + this.pageSize).then(resp => {
        const { results, count } = resp.data
        this.datas = results
        this.totalRows = count
      })
    },
    handleSizeChange (size) {
      console.info(size)
      this.currentPage = 1
      this.pageSize = size
      this.loadData()
    },
    handleCurrentChange (page) {
      console.info(page)
      this.currentPage = page
      this.loadData()
    }
  },
  mounted () {
    this.loadData()
  }
}
</script>

<style>
</style>
